{% extends '@theme/base.html.twig' %}

{% block stylesheets %}
{{ parent() }}
<style type="text/css">
    .specialization .logo img {
        max-width: 100px;
    }
</style>
{% endblock %}

{% block body %}
<div class="container-fluid bg-dark">
    <div class="container">
        <div class="pt-5 pb-2 text-center">
            <h1 class="font-weight-light"><a href="{{ url('home') }}" class="text-white text-decoration-none">it<span class="text-green">offers</span>.online</a></h1>
            <p class="lead text-light">
                The best job offers for IT talents.
            </p>
        </div>
    </div>
</div>
<div class="container-fluid pt-4 bg-light">
    <div class="container">
        <h3>Specializations</h3>
        <div class="row mt-4">
            {% for specialization in specializations %}
            <div class="col-md-2 mb-4">
                <div class="card specialization border-0" data-href="{{ url('specialization_offers', {specSlug: specialization.slug}) }}">
                    <div class="card-title text-center mt-2 pb-2">
                        <h4 class="font-weight-light">
                            <a class="text-decoration-none" href="{{ url('specialization_offers', {specSlug: specialization.slug}) }}">
                            {{ specialization.slug|specialization_name }}
                            </a>
                        </h4>
                        <div class="logo">
                            <a href="{{ url('specialization_offers', {specSlug: specialization.slug}) }}">
                                {% include '@offers/specialization/_logo.html.twig' with {specialization: specialization.slug} only %}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% if specializations.filterWithFacebook|length or specializations.filterWithTwitter|length %}
        <h3 class="mt-4">Social Media</h3>
        <p class="small">
            Job offers for IT people are automatically published at below social media networks.
        </p>
        <div class="row mt-4">
            <div class="col-md-8">
                <h4><i class="fab fa-facebook-square text-blue"></i> Facebook Groups</h4>
                <div class="row mt-4">
                    {% for specialization in specializations.filterWithFacebook %}
                        <div class="col-md-4 mb-4">
                            <div id="fb-grop-{{ specialization.slug }}" class="fb-group" data-href="{{ specialization.facebookChannel.groupId|fb_group_url }}" data-show-social-context="true" data-show-metadata="false"></div>
                        </div>
                    {% else %}
                        <div class="col-md-12 mb-4">
                            <h4>Coming Soon!</h4>
                        </div>
                    {% endfor %}
                </div>
            </div>
            <div class="col-md-4">
                <h4><i class="fab fa-twitter-square text-blue"></i> Twitter Accounts</h4>
                <div class="row mt-4">
                    {% for specialization in specializations.filterWithTwitter %}
                        <div class="col-md-12 mb-4">
                            <a class="twitter-follow-button"
                               href="https://twitter.com/{{ specialization.twitterChannel.screenName }}"
                               data-size="large">
                            Follow @{{ specialization.twitterChannel.screenName }}
                            </a>
                        </div>
                    {% else %}
                        <div class="col-md-12 mb-4">
                            <h4>Coming Soon!</h4>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}